<template>
	<view>
		<navbar title="审批" :autoBack="true"></navbar>
		<scroll-view scroll-y="true" class="scbox">
			<view class="con">
				<view class="con__box">
					<view class="con__tab" v-for="(item,index) in tablist" :key="index" @click="navto('/pages/approval/'+item.url)">
						<image :src="'/static/tool/'+item.icon+'.png'" class="con__tab__icon" mode=""></image>
						<view class="" style="flex: 1;">
							<view class="con__tab__text">
								{{item.text}}
							</view>
							<view class="con__tab__tip">
								{{item.tip}}
							</view>
						</view>
						<image src="/static/homex/more2.png" class="con__tab__more" mode=""></image>
					</view>
				</view>
				<view class="con__box1">
					<view class="con__title">
						<view class="con__title__line"></view> 我的审批记录
					</view>
					<view class="con__item" v-for="(item,index) in list" :key="index" @click="navto('/pages/approval/details?id='+item.id+'&type=my')">
						<view class="u-flex u-flex-items-end u-flex-between">
							<!-- <view class="con__item__name">
								其他(0天)
							</view> -->
							<view class="con__item__name" v-if="item.type==1">
								请假({{item.form.often}}{{item.form.unit}})
							</view>
							<view class="con__item__name" v-if="item.type==2">
								外出({{item.form.often}}{{item.form.unit}})
							</view>
							<view class="con__item__name" v-if="item.type==3">
								加班({{item.form.often}}{{item.form.unit}})
							</view>
							<view class="con__item__name" v-if="item.type==4">
								其他
							</view>
							<view class="con__item__time">
								{{$u.timeFormat(item.createtime, 'yyyy-mm-dd')}}
							</view>
						</view>
						<view class="u-flex u-flex-items-end u-flex-between">
							<view class="" v-if="item.type!=4">
								<view class="con__item__time" v-if="item.form.starttime" style="margin-top: 28rpx;">
									开始时间:
									{{$u.timeFormat(item.form.starttime, 'yyyy-mm-dd')}}周{{weeklist[new Date(item.form.starttime).getDay()]}}
									{{$u.timeFormat(item.form.starttime, 'hh:MM')}}
								</view>
								<view class="con__item__time" v-if="item.form.endtime" style="margin-top: 28rpx;">
									结束时间:
									{{$u.timeFormat(item.form.endtime, 'yyyy-mm-dd')}}周{{weeklist[new Date(item.form.endtime).getDay()]}}
									{{$u.timeFormat(item.form.endtime, 'hh:MM')}}
								</view>
							</view>
							<view class="" v-else>
								<view class="con__item__time" style="margin-top: 28rpx;height: 24rpx;">
									
								</view>
								<view class="con__item__time" style="margin-top: 28rpx;">
									审批类型:{{item.form.type}}
								</view>
							</view>
							<view class="">
								<u-button color="#3262FD" v-if="item.status==1"
									:customStyle='{width:"143rpx",height:"69rpx",margin:0,padding:0,borderRadius:"8rpx",fontSize:"28rpx"}'>审批中</u-button>
								<u-button color="#3262FD" v-if="item.status==3"
									:customStyle='{width:"143rpx",height:"69rpx",margin:0,padding:0,borderRadius:"8rpx",fontSize:"28rpx"}'>已驳回</u-button>
								<u-button color="#3262FD" v-if="item.status==2"
									:customStyle='{width:"143rpx",height:"69rpx",margin:0,padding:0,borderRadius:"8rpx",fontSize:"28rpx"}'>已通过</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import sale from '@/api/_sale.js'
	export default {
		data() {
			return {
				weeklist: ['日', '一', '二', '三', '四', '五', '六'],
				tablist:[
					{text:'发起审批',tip:'发起一个新的请假外出申请',icon:'fcsp',url:'check'},
					{text:'查看我处理的审批',tip:'查看其他成员提交给你的审批',icon:'cksp',url:'myhandled'},
				],
				list:[]
			};
		},
		methods:{
			async getlist(){
				let res = await sale.getMySubmitExam()
				if(res.data.code==1){
					this.list=res.data.data
					this.list.map(t => {
						let a = t.form_json
						t.form = JSON.parse(a)
					})
				}
			}
		},
		onShow() {
			this.getlist()
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f8f8f8;
}
.con{
	padding: 20rpx 30rpx;
	&__box{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-left: 30rpx;
		margin-bottom: 27rpx;
	}
	&__box1{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 46rpx 26rpx 0 37rpx;
	}
	&__title{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #1E1E1E;
		line-height: 26rpx;
		display: flex;
		align-items: center;
		&__line{
			width: 5rpx;
			height: 24rpx;
			background: #3262FD;
			margin-right: 10rpx;
		}
	}
	&__item{
		padding-bottom: 35rpx;
		padding-top: 35rpx;
		border-bottom: 2rpx solid #F4F6F8;
		&__name{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #010101;
			line-height: 30rpx;
		}
		&__time{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #7F7E7E;
			line-height: 23rpx;
		}
	}
	&__tab{
		height: 180rpx;
		display: flex;
		align-items: center;
		padding-right: 30rpx;
		border-bottom: 2rpx solid #F4F6F8;
		&__icon{
			width: 109rpx;
			height: 109rpx;
			margin-right: 16rpx;
		}
		&__text{
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 30rpx;
			color: #333333;
			line-height: 30rpx;
		}
		&__tip{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #7F7E7E;
			line-height: 24rpx;
			margin-top: 16rpx;
		}
		&__more{
			width: 12rpx;
			height: 22rpx;
		}
	}
}
.bb0{
	border-bottom: 0;
}
</style>
